<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>弹性布局</title>
    <style type="text/css">
      /* ************************************************************** */
      html:root {
        --box-width: 300px;
        --box-height: fit-content;
      }
      .demo-item-flex.demo-item-flex {
        width: 1100px;
        height: 1050px;
        display: inline-flex;
        flex-flow: column wrap;
      }
      /* ************************************************************** */
      /* ************************************************************** */
      .container {
        display: flex;
        box-shadow: 0 0 0 3px red;
      }
      .container > div {
        outline: 1px solid black;
      }
      .case {
        height: 160px;
        width: 160px;
        gap: 5px;
        flex-wrap: wrap;
      }
      .case > div {
        height: 50px;
        width: 50px;
      }

      .case1 {
        height: 150px;
        width: 150px;
        counter-reset: case1-count;
        flex-direction: row;
      }
      .case1 > div {
        counter-increment: case1-count;
        position: relative;
        flex: 1;
      }
      .case1 > div::before {
        content: counter(case1-count);
        display: block;
        width: 100%;
        position: absolute;
      }

      .case2 {
        margin: 10px 0;
        height: 50px;
        width: 200px;
        overflow: auto;
        flex-wrap: wrap;
      }
      .case2 > div {
        flex-basis: 50px;
        background-image: radial-gradient(blue, transparent);
      }

      .case3 {
        margin: 10px 0;
        height: 50px;
        width: 200px;
        overflow: auto;

        justify-content: flex-end;
      }
      .case3 > div {
        flex-shrink: 0;
        flex-basis: 50px;
        background-image: radial-gradient(blue, transparent);
      }
      li strong {
        text-decoration: underline blue 2px;
        text-underline-position: under;
        cursor: pointer;
      }
      strong + p {
        margin-top: 10px;
        max-height: 0;
        transition: all 0.1s;
        position: absolute;
        width: 250px;
        padding: 10px 15px;
        background-color: white;
        border-radius: 4px;
        border: 1px solid black;
        margin-left: -300px;
        margin-top: -50px;
        opacity: 0;
        visibility: hidden;
      }
      strong:hover + p {
        visibility: visible;
        opacity: 1;
        max-height: 100%;
      }

      .case4 {
        margin: 10px 0;
        height: 90px;
        width: fit-content;
        padding: 5px;
        align-items: stretch;
      }
      .case4 > div {
        background-color: aquamarine;
      }

      .case5 {
        margin: 10px 0;
        width: 200px;
        resize: horizontal;
        overflow: auto;
      }
      .case5 > div {
        background-color: aquamarine;
      }
      /* ************************************************************** */
      /* ************************************************************** */
    </style>
  </head>
  <body>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <header>
      <a href="./17-分栏布局.html">上一篇</a>
      <a href="./19-网格布局.html">下一篇</a>
    </header>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <section class="demo-box">
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>基础</dt>
        <dd>
          <div class="container case">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </dd>
        <h3>
          display: flex 后发生了什么？
        </h3>
        <ol>
          <li>子项块状化，包括匿名元素</li>
          <li>子项浮动失效</li>
          <li>子项支持z-index</li>
          <li>子项宽度是计算得出的</li>
          <li>子项绝对定位会脱离弹性布局</li>
          <li>子项默认是收缩的</li>
        </ol>
        <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
        <dt>flex-flow</dt>
        flex的流向设置，是fiex-direction和flex-wrap的简写
        <h4>fiex-direction</h4>
        row / row-reverse /
        <br />
        column / column-reverse
        <br />
        <br />
        <dd>
          <div class="container case1">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </dd>
        <h4>
          flex-wrap
        </h4>
        见
        <strong>基础</strong>
        章节。没啥好说的。
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl class="demo-item-flex">
        <dt>对齐特性</dt>
        <dd>
          <h4>综述</h4>
          <ul>
            <li>justify: 水平方向</li>
            <li>align: 垂直方向</li>
            <li>items: 全体元素</li>
            <li>content: 整体布局</li>
            <li>self: 自身（一定应用在子元素上）</li>
          </ul>
        </dd>
        <dd>
          <h4>
            justify-content（只与弹性布局
            <br />
            相关部分，下同，不再赘述）
          </h4>
          <ul>
            <li>
              <strong>normal</strong>
              <p>
                初始值。有列概念时，如分栏、网格布局，等于stretch；没有列概念，如弹性布局，相当于flex-start
              </p>
              <div class="container case2">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
              </div>
            </li>
            <li>
              <strong>flex-start</strong>
              <p>
                文档流左对齐。ps：不是start，目前该属性无效，是用在网格布局中。而flex相关的有前缀。
              </p>
            </li>
            <li>
              <strong>flex-end</strong>
              <p>文档流右对齐。设置该属性后，overflow的滚动会失效</p>
              <div class="container case3" style="flex-wrap: wrap;">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
              </div>
              <i style="margin: 10px 0; display: inline-block;">
                下方仅仅不允许换行，可以看到
                <br />
                本该出现的滚动条没有出现
              </i>
              <div class="container case3">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
              </div>
            </li>
            <li>
              <strong>center</strong>
              <p>整体布局居中</p>
              <div class="container case2" style="justify-content: center;">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
              </div>
            </li>
            <li>
              <strong>space-between</strong>
              <p>让多余空白平均分配以形成间隙</p>
              <div
                class="container case2"
                style="justify-content: space-between;"
              >
                <div></div>
                <div></div>
              </div>
            </li>
            <li>
              <strong>space-around</strong>
              <p>让子项两端形成互不影响的等间隙</p>
              <div
                class="container case2"
                style="justify-content: space-around;"
              >
                <div></div>
                <div></div>
              </div>
            </li>
            <li>
              <strong>space-evenly</strong>
              <p>让多余空白平均分配以形成间隙，包括两端</p>
              <div
                class="container case2"
                style="justify-content: space-evenly;"
              >
                <div></div>
                <div></div>
              </div>
            </li>
          </ul>
        </dd>
        <dd>
          <h4>align-items和align-self</h4>
          align-items用于容器，控制所有子项
          <br />
          align-self控制自身，初始值为auto，由容器决定
          <br />
          两者设置效果是一致的
          <ul>
            <li>
              <strong>auto</strong>
              <p>
                align-self的默认值，align-items没有这个值
              </p>
            </li>
            <li>
              <strong>stretch</strong>
              <p>
                可以看成默认值。向上拉伸，至容器高度；若子项存在高度，则按height渲染。
                <br />
                ps：也就是说，所有渲染尺寸优先度小于height
              </p>
              <i>下图第一项单独设置了高度</i>
              <div class="container case4">
                <div style="height: 55px;">
                  <img src="../../Source/pic.jpg" width="50px" />
                </div>
                <div><img src="../../Source/pic.jpg" width="40px" /></div>
                <div><img src="../../Source/pic.jpg" width="30px" /></div>
                <div><img src="../../Source/pic.jpg" width="80px" /></div>
                <div><img src="../../Source/pic.jpg" width="70px" /></div>
              </div>
            </li>
            <li>
              <strong>flex-start</strong>
              <p>
                文档流顶端对齐
              </p>
              <div class="container case4" style="align-items: flex-start;">
                <div><img src="../../Source/pic.jpg" width="50px" /></div>
                <div><img src="../../Source/pic.jpg" width="40px" /></div>
                <div><img src="../../Source/pic.jpg" width="30px" /></div>
                <div><img src="../../Source/pic.jpg" width="80px" /></div>
                <div><img src="../../Source/pic.jpg" width="70px" /></div>
              </div>
            </li>
            <li>
              <strong>flex-end</strong>
              <p>
                文档流底端对齐
              </p>
              <div class="container case4" style="align-items: flex-end;">
                <div style="height: 65px;">
                  <img src="../../Source/pic.jpg" width="50px" />
                </div>
                <div style="height: 60px;">
                  <img src="../../Source/pic.jpg" width="40px" />
                </div>
                <div style="height: 50px;">
                  <img src="../../Source/pic.jpg" width="30px" />
                </div>
                <div style="height: 90px;">
                  <img src="../../Source/pic.jpg" width="80px" />
                </div>
                <div style="height: 75px;">
                  <img src="../../Source/pic.jpg" width="70px" />
                </div>
              </div>
            </li>
            <li>
              <strong>center</strong>
              <p>
                文档流居中
              </p>
              <div class="container case4" style="align-items: center;">
                <div><img src="../../Source/pic.jpg" width="50px" /></div>
                <div><img src="../../Source/pic.jpg" width="40px" /></div>
                <div><img src="../../Source/pic.jpg" width="30px" /></div>
                <div><img src="../../Source/pic.jpg" width="80px" /></div>
                <div><img src="../../Source/pic.jpg" width="70px" /></div>
              </div>
            </li>
            <li>
              <strong>baseline</strong>
              <p>
                基线对齐
              </p>
              <i>不同之处可以参考flex-end</i>
              <div
                class="container case4"
                style="align-items: baseline; font-size: 24px;"
              >
                <div style="height: 65px;">
                  x
                  <img src="../../Source/pic.jpg" width="50px" />
                </div>
                <div style="height: 60px;">
                  x
                  <img src="../../Source/pic.jpg" width="40px" />
                </div>
                <div style="height: 50px;">
                  x
                  <img src="../../Source/pic.jpg" width="30px" />
                </div>
                <div style="height: 90px;">
                  x
                  <img src="../../Source/pic.jpg" width="80px" />
                </div>
                <div style="height: 75px;">
                  x
                  <img src="../../Source/pic.jpg" width="70px" />
                </div>
              </div>
            </li>
          </ul>
        </dd>
        <dd>
          <h4>align-content</h4>
          与align-items的不同：
          <br />
          align-items，设置每一个item；
          <br />
          align-content，从布局整体出发。
          <br />
          <br />
          比较简单，也没什么特别的知识点。
          <ul>
            <li>stretch</li>
            <li>flex-start</li>
            <li>flex-end</li>
            <li>center</li>
            <li>space-between</li>
            <li>space-around</li>
            <li>space-evenly</li>
          </ul>
        </dd>
        <dt>order</dt>
        <dd>
          设置在子项，让子项按序渲染（小在前）
          <br />
          默认值为0。
          <div class="container case1" style="margin-top: 10px; height: 50px;">
            <div></div>
            <div></div>
            <div></div>
            <div style="order: -1;"></div>
            <div></div>
          </div>
          <pre><code>order: -1</code></pre>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl style="width: 500px;">
        <dt>flex</dt>
        <dd>
          语法：
          <pre><code>flex: &lt;flex-grow&gt; &lt;flex-shrink&gt; ? || &lt;flex-basis&gt;</code></pre>
          flex不同于其他缩写，只写部分时，其余并不以默认值缺省
          <ul>
            <li>flex: 1 = flex: 1 1 0%</li>
            <li>flex: 1 1 = flex: 1 1 0%</li>
            <li>flex: 100px = flex: 1 1 100px</li>
            <li>flex: auto = flex: 1 1 auto</li>
            <li>flex: none = flex: 0 0 auto</li>
            <li>flex: initial = flex: 0 1 auto</li>
            <li>flex: 0 = flex: 0 1 0%</li>
          </ul>
          各属性含义（子项中设置多个时按计算和，略有不同）：
          <ul>
            <li>flex-grow，空间剩余时，按设置比例抢占之</li>
            <li>flex-shrink，空间不足时，按设置比例吐出自身空间</li>
            <li>
              flex-basis，与flex-grow和flex-shrink有关。当其不为auto：
              <br />
              <strong>0 0</strong>
              本身不伸缩，相当于width
              <br />
              <strong>1 1</strong>
              发生伸缩时，该值作为基本盘，与其他子项竞争
              <br />
              <strong>1 0</strong>
              <strong>0 1</strong>
              相当于各自对应的的边界
            </li>
          </ul>
          <div class="container case5">
            <div style="flex: 0 1 90px;">1</div>
            <div style="flex: 0 2 60px;">2</div>
            <div style="flex: 0 1 90px;">3</div>
            <!-- <div style="flex: 1 1;">4</div> -->
          </div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>flex-basis计算规则</dt>
        <dd>
          先欠着
          <br />
          <a href="https://blog.csdn.net/qq_41635167/article/details/104190865" target="_blank">
            别人的，先凑合看看
          </a>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
    </section>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <link rel="stylesheet" href="./0-模板.css" />
    <link
      rel="stylesheet"
      href="../../Module/hightlight/styles/hybrid.min.css"
    />
    <script src="../../Module/hightlight/highlight.min.js"></script>
    <script>
      hljs.highlightAll()
    </script>
  </body>
</html>
